<!--访客车辆信息-->
<template>
<div class="common-body-wrapper">
  <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" @handleChange="handleSearchChange" :isNeedTree="true" :isCheckbox="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>
  <div class="common-table-tree-wrapper">
    <div class="common-table-wrapper">
      <multi-fun-table :sortColumn="notFormatColumn" :orderType="sortType" :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
        <div class="operate-btn-group" slot="operateBtnGroup">
          <a class="ake_btn ake_btn_text" v-if="isPermmited('PARK_CAR:PARK_VISITORLIST:SAVE')" @click.prevent="createTicket()">新建</a>
          <a class="ake_btn ake_btn_text" v-if="isPermmited('PARK_CAR:PARK_VISITORLIST:EXPORT')" @click.prevent="exportData()">导出</a>
        </div>
        <template slot="tdCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
              <span v-else-if="'parkList' == props.prop" @click.prevent="supportParkShowModal(scope.row)" class="row-href cursor">查看({{ scope.row.parkNum }})</span>
              <span v-else-if="'specialCarTypeConfigName' == props.prop" class="row-href cursor" @click.prevent="checkVisitorType(scope.row)">{{ scope.row[props.prop] }}</span>
              <span v-else>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>

        <!--操作列内的按钮-->
        <template slot="operateCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" width="120" class-name="operateCell">
            <template slot-scope="scope">
              <el-button size="small" type="primary" icon="icon-edit" class="ake-icon-font" title="编辑" :disabled="scope.row.sysVersion <= 2.3" v-if="isPermmited('PARK_CAR:PARK_VISITORLIST:EDIT')" @click="modifyVisitor(scope.row)" plain></el-button>
              <el-button size="small" type="primary" icon="icon-synchronize" class="ake-icon-font" title="同步详情" v-if="isPermmited('PARK_CAR:PARK_VISITORLIST:LIST')" @click="syncDetail(scope.row.id, true)" plain :disabled="scope.row.noSendStatus"></el-button>
              <el-button @click="delVisitor(scope.row)" size="small" type="danger" icon="icon-delete" class="ake-icon-font" title="删除" v-if="isPermmited('PARK_CAR:PARK_VISITORLIST:DEL')" plain></el-button>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>

      <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
    </div>
  </div>
  </basic-modal>

  <!--新增or编辑访客车辆信息-->
  <basic-modal ref="createVisitorModal" width="640" customeClass="ticket-row-modal" static="true">
    <h3 slot="title">{{ traderstatus == 'new' ? '新增访客' : '编辑访客' }}</h3>
    <div class="modal-body" slot="modal-body">
      <el-form :model="mouthTicketData.dataSave" ref="visitorForm" label-position="left" :rules="rules" label-width="120px" style="width: 500px">
        <el-form-item v-if="actionStatus == 'edit'" label="特殊车辆类型名称" prop="">
          <el-input v-model="specialCarTypeConfigName" :disabled="actionStatus == 'edit'" type="text"></el-input>
        </el-form-item>
        <div class="special-car-row" v-else>
          <el-form-item label="特殊车辆类型名称" prop="specialCarTypeConfigId">
            <!-- <div class="el-select">
              <div class="el-input el-input--suffix" @click="mouthTicketData.isShowSpecialCarType = !mouthTicketData.isShowSpecialCarType">
                <input type="text" readonly="readonly" autocomplete="off" placeholder="特殊车辆类型名称" class="el-input__inner" v-model="specialCarTypeConfigName" />
                <span class="el-input__suffix">
                  <span class="el-input__suffix-inner">
                    <i class="rotate el-input__icon el-icon-arrow-up" :class="{ rotate180: mouthTicketData.isShowSpecialCarType }"></i>
                  </span>
                </span>
              </div>
            </div>
            <div id="addVisitorType" class="el-select-dropdown" v-show="mouthTicketData.isShowSpecialCarType">
              <ul class="dropdown-menu">
                <li v-for="(item, index) in specialCarTypeConfigList" @click="configChange(item)">{{ item.name }}</li>
              </ul>
              <div class="add-btn" @click="addSpecialCarType">
                <img src="../../assets/img/ic_subscribe_add.svg" alt="" />
                <span style="color: #5995D8;">添加访客类型</span>
              </div>
            </div> -->
            <el-select v-model="mouthTicketData.dataSave.specialCarTypeConfigId" placeholder="请选择">
              <el-option v-for="item in specialCarTypeConfigList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="ake_btn ake_btn_text check_setting" @click="checkVisitorType" :disabled="!mouthTicketData.dataSave.specialCarTypeConfigId">查看</div>
          <el-button type="primary" class="ake_btn ake_btn_text" @click="addSpecialCarType">去创建</el-button>
        </div>
        <el-form-item label="车牌号码" prop="carLicenseNumber">
          <el-input placeholder="请输入车牌号码" v-model="mouthTicketData.dataSave.carLicenseNumber"></el-input>
        </el-form-item>
        <el-form-item label="车主姓名" prop="owner">
          <el-input placeholder="请输入车主姓名" v-model="mouthTicketData.dataSave.owner"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input placeholder="请输入电话号码" v-model="mouthTicketData.dataSave.ownerPhone"></el-input>
        </el-form-item>
        <el-form-item label="来访原因">
          <el-input type="textarea" placeholder="请输入来访原因" v-model="mouthTicketData.dataSave.visitReason"></el-input>
        </el-form-item>
        <el-form-item label="预计来访时间段" prop="visitFromTo">
          <el-date-picker v-model="mouthTicketData.dataSave.visitFromTo" type="datetimerange" align="right" placeholder="请选择预计来访停留时间段" :editable="false" :clearable="false" :picker-options="afterPickerOptions" :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <div class="show-rule-detail-icon" @click="remarkChunkShow = !remarkChunkShow">
            <i class="el-icon-arrow-down" :class="{ rotate180: remarkChunkShow }"></i>
          </div>
        </el-form-item>
        <div class="remark-chunk" v-show="remarkChunkShow">
          <el-form-item label="备注1" prop="remark1">
            <el-input type="textarea" placeholder="请输入备注1" :rows="3" v-model="mouthTicketData.dataSave.remark1"></el-input>
          </el-form-item>
          <el-form-item label="备注2" prop="remark2">
            <el-input type="textarea" placeholder="请输入备注2" :rows="3" v-model="mouthTicketData.dataSave.remark2"></el-input>
          </el-form-item>
          <el-form-item label="备注3" prop="remark3">
            <el-input type="textarea" placeholder="请输入备注3" :rows="3" v-model="mouthTicketData.dataSave.remark3"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitForm('visitorForm')">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('createVisitorModal')">取消</button>
    </div>
  </basic-modal>

  <!--访客详情-->
  <basic-modal ref="supportParkModal" width="580" customeClass="surpport-park-modal" static="true">
    <h3 slot="title">详情</h3>
    <div class="modal-body" slot="modal-body">
      <multi-fun-table :theads-info="supportPark.theadsInfo" :tbodys-info="supportParkList">
        <!--普通列-->
        <template slot="tdCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text modal-close" @click="closed('supportParkModal')">关闭</button>
    </div>
  </basic-modal>

  <!--选择停车场树-->
  <basic-modal ref="selectParkModal" width="400" customeClass="select-park-modal" static="true">
    <h3 slot="title">适用停车场</h3>
    <div class="modal-body" slot="modal-body" style="padding:30px 50px;">
      <!-- <el-input placeholder="请输入搜索关键字" style="width:280px;" v-model="itemsKeyName" class="first-item"></el-input>
      <el-button size="small" type="primary" @click="searchItems('ParkTree')" class="select-park-btn ake_btn_text">搜索</el-button> -->
      <div class="common-tree modal-tree-box">
        <ul id="ParkTree" name="ParkTree" class="ztree"></ul>
      </div>
      <label>
        <span>共{{ itemsNum }}项</span>
      </label>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button type="button" class="ake_btn ake_btn_text" @click="closed('selectParkModal', 1)">关闭</button>
    </div>
  </basic-modal>

  <!--同步详情-->
  <basic-modal ref="syncDetailModal" width="1000" customeClass="sync-detail-modal" static="true">
    <h3 slot="title">同步详情</h3>
    <div class="modal-body" slot="modal-body">
      <multi-fun-table :theads-info="syncDetailModal.theadsInfo" :tbodys-info="syncDetailModal.syncDetailList">
        <!--普通列-->
        <template slot="tdCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'sendStatus' == props.prop">{{ scope.row.sendStatus | sendStatus }}</span>
              <span v-else-if="'operate' == props.prop">
                <el-button v-if="isPermmited('PARK_CAR:PARK_VISITORLIST:RESYNC')" size="small" type="primary" class="ake_btn_text" @click="reSync(scope.row)">重新同步</el-button>
              </span>
              <span :title="scope.row[props.prop]" v-else>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text modal-close" @click="closed('syncDetailModal')">关闭</button>
    </div>
  </basic-modal>

  <!-- 特殊车辆类型组件 -->
  <SpecialCarTypeCom ref="specialCarTypeCom" @getVisitorConfigList="getVisitorConfigList"></SpecialCarTypeCom>
</div>
</template>

<script>
import common from '@mixins/common.js';
import stardardList from '@mixins/tables/stardardList.js';
import SpecialCarTypeCom from '../operation/components/specialCarTypeCom';

//modal
import invokeModal from '@mixins/modal/invokeModal.js';

// 引进vue的js
import park_visitorlist from './js/park_visitorlist.js';
export default {
  name: 'parkVisitorlist',
  mixins: [common, stardardList, invokeModal, park_visitorlist],
  components: {
    SpecialCarTypeCom
  },
  data() {
    const today = [new Date(moment().format('YYYY-MM-DD 00:00:00')), new Date(moment().format('YYYY-MM-DD 23:59:59'))];

    return {
      fixedCols: 3,
      total: 0,
      paramName: 'parkIds',
      traderstatus: 'new',
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示
      searchList: [{
          type: 'text',
          isShow: false,
          name: 'carLicenseNumber',
          text: '车牌号',
          value: '',
          style: {
            width: "120px"
          }
        },
        {
          type: 'text',
          isShow: false,
          name: 'owner',
          text: '车主姓名',
          value: '',
          style: {
            width: "120px"
          }
        },
        {
          format: "yyyy-MM-dd HH:mm:ss",
          isShow: false,
          type: "datePicker",
          propName: "startDate,endDate",
          name: "visitTimeFromTo",
          text: "来访时间",
          value: today,
          style: {
            width: "360px"
          }
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: 'reno', text: '序号', width: 64 },
        {
          index: 1,
          isShow: false,
          prop: 'carLicenseNumber',
          text: '车牌号',
          sortable: true,
          minWidth: 50
        },
        {
          index: 2,
          isShow: false,
          prop: 'owner',
          text: '车主姓名',
          sortable: true,
          minWidth: 50
        },
        {
          index: 3,
          isShow: false,
          prop: 'ownerPhone',
          text: '电话号码',
          sortable: true,
          minWidth: 60
        },
        {
          index: 4,
          isShow: false,
          prop: 'specialCarTypeConfigName',
          text: '访客类型',
          sortable: true,
          minWidth: 60
        },
        {
          index: 5,
          isShow: false,
          prop: 'timeperiodList',
          text: '预计来访时段',
          sortable: true,
          minWidth: 130
        },
        {
          index: 6,
          isShow: false,
          prop: 'parkList',
          text: '适用停车场',
          sortable: true
        },
        {
          index: 7,
          isShow: false,
          prop: 'remark1',
          text: '备注1',
          sortable: true,
          minWidth: 50
        },
        {
          index: 8,
          isShow: false,
          prop: 'remark2',
          text: '备注2',
          sortable: true,
          minWidth: 50,
          initHidden: true
        },
        {
          index: 9,
          isShow: false,
          prop: 'remark3',
          text: '备注3',
          sortable: true,
          minWidth: 50,
          initHidden: true
        },
        {
          index: 10,
          isShow: false,
          prop: 'operateBy',
          text: '最近操作员',
          sortable: true,
          initHidden: true
        },
        {
          index: 11,
          isShow: false,
          prop: 'operateTime',
          text: '最近操作时间',
          sortable: true,
          minWidth: 80,
          initHidden: true
        }
      ],
      tbodysInfo: []
    };
  },
  methods: {}
};
</script>

<style>
/*滚动条样式*/
.dropdown-menu::-webkit-scrollbar {
  width: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.dropdown-menu::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>

<style lang="less">
.special-car-row {
  display: flex;

  .el-form-item {
    flex: 1;

    .el-form-item__content {
      display: flex;
      align-items: center;
      position: relative;

      .el-select {
        flex: 1;
      }
    }
  }

  .check_setting {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>

<style lang="less" scoped>
@import '../../assets/less/libs/zTreeStyle.css';

.el-select-dropdown {
  border: 1px solid #e4e7ed;
  background-color: #fff;
  min-width: 226px;
  box-shadow: 0 2px 8px 0 rgba(53, 59, 69, 0.3);
  border-radius: 3px;
  position: absolute;
  left: 0;
  top: 100%;

  .dropdown-menu {
    max-height: 274px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-bottom: 45px;

    >li {
      font-size: 14px;
      padding: 0 20px;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #606266;
      height: 34px;
      line-height: 34px;
      box-sizing: border-box;
      cursor: pointer;

      &:hover {
        background-color: #f5f7fa;
      }
    }
  }

  .add-btn {
    height: 40px;
    line-height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding-left: 20px;
    border-top: 1px solid rgba(215, 220, 226, 0.6);
    cursor: pointer;

    >span {
      font-size: 14px;
      color: #5995d8;
      padding-left: 5px;
    }

    >img {
      position: relative;
      bottom: 2px;
    }
  }
}

.rotate {
  &.rotate180 {
    transform: rotate(-180deg);
  }
}

.ticket-row-modal {
  padding-bottom: 30px;

  .first-item {
    width: 240px;
  }

  .modal-body {
    overflow-y: scroll;
  }

  .file-input {
    .el-input__inner {
      display: block;
      width: 100%;
      height: 30px;
      padding: 0px !important;
      font-size: 14px;
      line-height: 30px;
      color: #555;
      background-color: none;
      background-image: none !important;
      border: 0px solid #cccccc !important;
      border-radius: 0px;
      box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075);
      transition: border-color ease-in-out 0s, box-shadow ease-in-out 0s;
    }
  }

  .select-park-btn {
    margin-bottom: 10px;
  }

  .select-park-table td,
  th {
    padding-left: 10px;
    padding-right: 10px;
  }

  .ticket-pic {
    width: 120px;
  }
}

.trader-select {
  width: 240px;
}

.surpport-park-modal {
  padding-bottom: 30px;

  .modal-body {
    max-height: 480px;
    min-height: 380px;
    overflow-y: scroll;
  }

  #supportParkTable {
    height: 300px;
  }
}

.show-rule-detail-icon {
  //备注块显示与隐藏
  height: 100%;
  width: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: inline-block;

  .el-icon-arrow-down {
    font-size: 18px;
    color: #b0b0b0;
    transition: transform 0.25s ease-in;
    transform-origin: center center;

    &.rotate180 {
      transform: rotate(-180deg);
    }
  }
}
</style>
